<template>
    <div class="p_20">
        <div class="useravative flexcenter">
           <img src="@/assets/images/avatar.png" alt="">
        </div>
        <el-form :model="form" :rules="rules" ref="reForm" label-width="120px" label-position="left" class="mb_40">
            <el-form-item label="姓名：">
                <span>{{detail.userinfo?detail.userinfo.name:'-'}}</span>
            </el-form-item>
            <el-form-item label="支付方式:" >
                <span>{{detail.userinfo?detail.userinfo.pay_type_name:'-'}}</span>
            </el-form-item>
            <el-form-item label="账号：" v-if="detail.userinfo&&detail.userinfo.pay_type==1">
                <span>{{detail.userinfo?detail.userinfo.account:'-'}}</span>
            </el-form-item>
            <el-form-item label="二维码：" v-else>
                <img :src="detail.userinfo&&detail.userinfo.url" class='img' />
            </el-form-item>
            <el-form-item label="金额：">
                <span>{{detail.coin}}</span>
            </el-form-item>
            <el-form-item label="联系方式：">
                <span>{{detail.userinfo?detail.userinfo.phone:'-'}}</span>
            </el-form-item>
            <el-form-item label="支付结果：" prop="pay">
                    <el-select v-model="form.pay" placeholder="支付结果" style="width:100%">
                        <el-option label="支付成功" :value="1"></el-option>
                        <el-option label="支付失败" :value="2"></el-option>
                    </el-select>
            </el-form-item>
            <el-form-item v-if="form.pay&&form.pay==1" label="支付订单号：" prop="order">
                <el-input v-model="form.order" placeholder="请输入支付订单号" />
            </el-form-item>
            <el-form-item v-if="form.pay&&form.pay==2" label="支付说明：" prop="msg">
                <el-input v-model="form.msg" type="textarea" rows="5" placeholder="支付说明" />
            </el-form-item>
        </el-form>
        <div class="dialog-userfooter">
            <el-button @click="handleCancle">取 消</el-button>
            <el-button type="primary" @click="handleSave">确 定</el-button>
        </div>
    </div>
</template>
<script>
import { getpayDetail, successPay,failPay} from '@/api/message';
export default {
    data(){
        return {
            form:{
                pay:'',
                order:'',

            },
            detail:{},
            rules:{
                pay:[{ required: true, message: '请选择支付结果', trigger: 'change' }],
                order:[{ required: true, message: '请输入订单号', trigger: 'change' }],
                account:[{ required: true, message: '请输入账号', trigger: 'blur' }],
                phone:[{ required: true, message: '请输入联系方式', trigger: 'blur' }],
                address:[{ required: true, message: '请输入家庭住址', trigger: 'blur' }]
            },
        }
    },

    props:{
        rowinfo:{
            type:Object,
            default:null
        },
        // type:{
        //     type:Number,
        //     default:1
        // }
    },

    created(){
        console.log('id:',this.rowinfo.id);
        this.getDetail()
    },

    methods:{

        getDetail(){
            getpayDetail({id:this.rowinfo.id}).then(res=>{
                if(res.code == 1){
                    this.detail = res.data;
                }
            })
        },

        handleSave(){
            this.$refs.reForm.validate(valid=>{
                if(!valid) return;
                if(this.form.pay==1){
                    successPay({id:this.rowinfo.id,order:this.form.order}).then(res=>{
                        if(res.code == 1){
                            this.$message.success('提交成功');
                            this.handleCancle(1)
                        }
                    })
                }else{
                    failPay({id:this.rowinfo.id,msg:this.form.msg}).then(res=>{
                        if(res.code == 1){
                            this.$message.success('提交成功');
                            this.handleCancle(1)
                        }
                    })
                }
            })
        },

        handleCancle(type){
            this.$emit('close',type)
        },
    }
}
</script>
<style lang="scss" scoped>
.useravative{
    width: 100%;
    margin: 40px;
    img{
        width: 60px;
        height: 60px;
    }
}
.img{
    width: 100px;
    height: 100px;
}
</style>